<template>
  <div class="all" :style="styleAll()">
    <div class="allChild">
      <div class="value">
        {{index}}.{{data.title}}
      </div>
        <div class="dropDown" :style="styleDrop()" @click="setRotate">V</div>
    </div>
    <div class="chilren" v-if="data.children">
      <div class="heightRun" :style="styleHeight()">
        <div v-for="(item, index) in data.children" 
          :key="index" class="section">
          <MySection  :data="item" :index="index+1"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: Number,
      default: -1
    }
  },
  data () {
    return {
      rotate: "transform: rotate(90deg);",
      height: "height: 0px;",
      over: "overflow: hidden;",
      timer1: new Object(),
      timer2: new Object(),
      parentHeight: ""
    }
  },
  watch: {},
  computed: {},
  methods: {
    styleDrop(){
      return "font-size: 2vh;" + this.rotate +
             "transition: transform 0.5s;"
    },
    styleHeight(){
      return  this.height +
             "transition: height 1s;" +
              this.over
    },
    setRotate(){
      if(!this.data.children){
        this.toLearn(this.data.title)
        return
      }
      if(this.rotate){
        if(this.timer2){
          clearTimeout(this.timer2)
          this.timer2 = ""
        }
        this.parentHeight = this.$parent.height
        this.$parent.height = ""
        this.rotate = ""
        let number = this.data.children.length
        let height = number*69.5 ;
        this.height = "height: " + height + "px;";
        this.timer1 = setTimeout(()=>{
          this.over = ""
        }, 1000)
      }else {
        if(this.timer1){
          clearTimeout(this.timer1)
          this.timer1 = ""
        }
        this.over = "overflow: hidden;"
        this.height = "height: 0px;"
        this.rotate = "transform: rotate(90deg);"
        this.timer2 = setTimeout(()=>{
          this.$parent.height = this.parentHeight
        }, 1000)
      }
    },
    styleAll(){
      if(!this.data.children){
        return "background-color: white;" +
               "background-clip: content-box;" +
               "border-radius: 5px;"
      }
    },
    toLearn(name){
      this.$router.push({
        path: "/learn",
        query: {
          title: name
        }
      })
    }
  },
  created () {},
  mounted () {}
}
</script>
<style scoped>
.allChild{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:15px;
  margin-top: 10px;
  box-sizing: border-box;
  border: 1px solid rgb(222, 112, 113);
  border-radius: 5px;
}
.heightRun{
  padding: 0px 22px 0px 22px;
  box-sizing: border-box;
}
</style>


